<template>
  <div class="checkListPage">
    		<!-- 日期和时间显示 -->
		<view class="date-time-container">
			<view class="date-info">
				<text class="date">{{ monthText }} {{ day }}{{ daySuffix }}</text>
				<text class="weekday">{{ weekdayText }}</text>
			</view>
			<view class="current-time">
				{{ currentTime }}
			</view>
		</view>
    
		<!-- 打卡记录 -->
		 <div class="checkList">
			<div class="itemState" style="margin-bottom: 30rpx;" v-for="item,index in rulelog" :key="index" v-show="item.status != 3">
				<itemState :item="item" />
			</div>
		 </div>
  </div>
</template>
<script>
import { getAttendanceRule, getStatus, handleClock, getAttendanceLogDetail } from '@/api/attendace'
import { mapState, mapActions } from 'pinia'
import dayjs from '@/uni_modules/uv-ui-tools/libs/util/dayjs.js'
import itemState from './itemState.vue'
import { uploadFile } from '@/api/home'
import { useUserinfoStore } from '@/store/info'
export default {
  data() {
		return {
			isWork: 1,
			ruleData: {},
			currentTime: '09:30:27',
			pendingAttendance: {},
			rule:[],
			rulelog:[],
			status: 1,
			clockInTime: '9:00',
			day: 20,
			month: 1, // 0-based month index (0 = January)
			year: 2025,
			weekday: 4, // 0 = Sunday, 1 = Monday, ...
			address: '',
			lng: '',
			lat: '',
			todayWork:{
				time: '',
				status: '',
			},
			overtime:{
				time: '',
				status: '',
			},
			timer: null
		}
	},
	components: {
		itemState,
	},
  computed: {
		...mapState(useUserinfoStore, ['location', 'info']),
		monthText() {
			const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
				'October', 'November', 'December'
			];
			return months[this.month];
		},
		weekdayText() {
			const weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
			return weekdays[this.weekday];
		},
		daySuffix() {
			if (this.day >= 11 && this.day <= 13) {
				return 'th';
			}

			switch (this.day % 10) {
				case 1:
					return 'st';
				case 2:
					return 'nd';
				case 3:
					return 'rd';
				default:
					return 'th';
			}
		}
	},
  created() {
		let that = this;
		that.getInfo()
		this.getListInfo()
		// console.log('当前位置的经度getLocation：');
		// uni.getLocation({
		// 	type: 'wgs84',
		// 	success: function (res) {
		// 		that.getInfo()
		// 		console.log('当前位置的经度：' + res.longitude);
		// 		console.log('当前位置的纬度：' + res.latitude);
		// 	},
		// 	fail: function (e) {
		// 		console.log('失败fail：', e);
		// 		this.isWork = 1 //获取定位失败
		// 	},
		// 	complete: (e) => { 
		// 		console.log('失败complete：', e);
		// 	}
		// });

		// 初始化当前日期和时间
		this.initDateTime();

		// 启动定时器更新时间
		this.timer = setInterval(() => {
			this.updateCurrentTime();
		}, 1000);
	},
  beforeDestroy() {
		// 清除定时器
		if (this.timer) {
			clearInterval(this.timer);
		}
	},
	methods: {
    getInfo(){
			let date = dayjs().format('YYYY-MM-DD')
			getAttendanceLogDetail({date}).then(res => {
				this.rulelog = res.log
			})
			
			getAttendanceRule({date}).then(res => {
					// this.isWork = !res.canAttendance
					this.currentRule = res.current_rule
					this.clockInTime = res.current_rule.time_string
					this.rule = res.rule
					// this.rule = res.log

				})
		},
		async getListInfo (){
			this.ruleData = await getStatus(this.info.location)
			this.canAttendanceMessage = this.ruleData.canAttendanceMessage
			this.isWork = !this.ruleData.canAttendance

		},
		initDateTime() {
			const now = new Date();
			this.year = now.getFullYear();
			this.month = now.getMonth();
			this.day = now.getDate();
			this.weekday = now.getDay();
			this.updateCurrentTime();
		},
		updateCurrentTime() {
			const now = new Date();
			const hours = String(now.getHours()).padStart(2, '0');
			const minutes = String(now.getMinutes()).padStart(2, '0');
			const seconds = String(now.getSeconds()).padStart(2, '0');
			this.currentTime = `${hours}:${minutes}:${seconds}`;
		},
  }
}
</script>

<style lang="scss" scoped>
.attendance-container {
	background-color: #f5f5f5;
	display: flex;
	flex-direction: column;
	height: 100vh;
}

/* 日期和时间 */
.date-time-container {
	padding: 40rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.date-info {
	display: flex;
	flex-direction: column;
	font-size: 26rpx;
	color: #101828;
	line-height: 38rpx;
	text-align: left;
}

.date {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.weekday {
	color: #666;
	margin-top: 4rpx;
	font-family: Inter, Inter;
	font-weight: 400;
	font-size: 24rpx;
	color: #475467;
	line-height: 32rpx;
	text-align: left;
}

.current-time {
	font-family: Inter, Inter;
	font-weight: normal;
	font-size: 58rpx;
	color: #101828;
	line-height: 80rpx;
	text-align: left;
	font-style: normal;
}

/* 打卡信息 */
.punch-info-container {
	padding: 24rpx 30rpx;
	background-color: #fff;
	border-radius: 20rpx 20rpx 0 0;
	margin: 20rpx;
	margin-top: 0rpx;
	flex: 1;

}

.punch-info-header {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
	// padding: 15rpx;
	// background: linear-gradient(to right, #e8f7f1, #fff);
	// border-radius: 8rpx;
}

.sun-icon {
	width: 60rpx;
	height: 60rpx;
	margin-right: 20rpx;

}

.punch-info-title {
	font-size: 34rpx;
	font-weight: bold;
	color: #333;
}

.punch-time {

	display: flex;
	align-items: center;
	margin-left: 66rpx;
	margin-bottom: 60rpx;

}

.time-label {
	font-size: 34rpx;
	color: #666;
}

.time-value {
	font-size: 34rpx;
	color: #333;
	margin-left: 10rpx;
}

/* 打卡按钮 */
.punch-btn-container {
	display: flex;
	justify-content: center;
	padding: 60rpx 0;
}

.punch-btn {
	width: 360rpx;
	height: 360rpx;

}

.punch-btn-icon {
	width: 100rpx;
	height: 100rpx;
	margin-bottom: 20rpx;
	width: 100%;
	height: 100%;
	opacity: 0.8;
}

/* 考勤范围 */
.attendance-scope {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 40rpx;

	.icon {
		width: 30rpx;
		height: 30rpx;
	}

	.scope-text {
		margin-left: 12rpx;
		font-size: 26rpx;
		color: #344054;

	}


}


/* 位置信息 */
.location-text {
	text-align: center;
	font-size: 30rpx;
	font-weight: bold;
	color: #333;
	margin: 20rpx 0;
	line-height: 1.4;
}

/* 打卡要求链接 */
.requirements-link {
	text-align: center;
	margin-top: 20rpx;
}

.link-text {
	color: #12af68;
	font-size: 30rpx;
	text-decoration: underline;
}

/* 浮动按钮 */
.floating-button {
	position: fixed;
	right: 40rpx;
	bottom: 80rpx;
	width: 100rpx;
	height: 100rpx;
	background: linear-gradient(to bottom, #00B3F8, #0072F8);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.2);
}

.floating-button image {
	width: 60%;
	height: 60%;
}

/* 打开状态 */
.status-card {
	background-color: #fff;
	padding: 24rpx 36rpx;
	margin: 20rpx;
	border-radius: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	position: relative;
}

.status-row {
	display: flex;
	align-items: center;
	padding: 12rpx 0;
	font-weight: 500;
	font-size: 26rpx;
	color: #344054;
	line-height: 38rpx;
	text-align: left;
	font-style: normal;
}

.exprie {
	font-family: Inter, Inter;
	font-weight: 500;
	color: #F95555;
	line-height: 19px;
	text-align: left;
}



.row-icon {
	width: 48rpx;
	height: 48rpx;
	margin-right: 20rpx;
}

.alarm-icon {
	opacity: 0.7;
}

.location-icon {
	opacity: 0.7;
}

.row-title {
	font-weight: bold;
	margin-right: 20rpx;
	font-size: 34rpx;
	color: #101828;
	line-height: 48rpx;
}

.row-time {
	font-size: 24rpx;
	color: #666;
	line-height: 19px;
}

.row-location {
	color: #666;
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.status-badge {
	position: absolute;
	top: 30rpx;
	right: 30rpx;
	background-color: #19B36E;
	border-radius: 100rpx;
	/* padding: 12rpx 20rpx; */
	display: flex;
	align-items: center;

	.badge-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 12rpx;
		padding: 16rpx;
		border-radius: 50%;
	}

	.badge-text {
		font-size: 26rpx;
		font-weight: bold;
		color: #fff;
		padding: 0 34rpx 0 22rpx;
	}
}

.status1 {
	background-color: #19B36E;

	.badge-icon {
		background: #65CC9E;
	}
}

.status2 {
	background-color: #F95555;

	.badge-icon {
		background: #FB8D8D;
	}
}

.status3 {
	background-color: #7A5AF8;

	.badge-icon {
		background: #BDB4FE;
	}
}

.status4 {
	background-color: #F79009;

	.badge-icon {
		background: #FEC84B;
	}
}

.punch-success-modal {
	background: #fff;
	border-radius: 30rpx;
	padding: 0 0 40rpx 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.modal-icon-wrap {
	margin-top: -60px;
	margin-bottom: 20rpx;
}

.modal-icon-bg {
	width: 120rpx;
	height: 120rpx;
	background: #19b36e;
	border-radius: 30rpx;
	padding: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10rpx 30rpx #19b36e33;
}

.modal-title {
	font-size: 38rpx;
	font-weight: bold;
	color: #222;
	margin: 20rpx 0 30rpx 0;
	text-align: center;
}

.modal-row {
	width: 90%;
	display: flex;
	justify-content: space-between;
	margin-bottom: 24rpx;
}

.modal-col {
	width: 48%;
	background: #f8fafc;
	border-radius: 18rpx;
	padding: 20rpx 16rpx;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.modal-col-title {
	font-size: 22rpx;
	color: #888;
	margin-bottom: 10rpx;
	display: flex;
	align-items: center;
	gap: 8rpx;
}

.modal-col-value {
	font-size: 32rpx;
	color: #222;
	font-weight: bold;
}

.modal-input {
	width: calc(100% - 12px);
	border: 1px solid rgba(0, 0, 0, 0.2);
	background: transparent;
	font-size: 28rpx;
	color: #222;
	margin-top: 8rpx;
}

.modal-upload-btn {
	width: 100%;
	background: #f3f4f6;
	color: #888;
	border: none;
	border-radius: 12rpx;
	font-size: 26rpx;
	margin-top: 8rpx;
	padding: 16rpx 0;
}

.modal-main-btn {
	width: 90%;
	background: linear-gradient(90deg, #3c9cff, #1abc9c);
	color: #fff;
	font-size: 32rpx;
	border-radius: 32rpx;
	padding: 20rpx 0;
	margin-top: 32rpx;
	box-shadow: 0 2rpx 8rpx #3c9cff33;
}

.modal-outline-btn {
	width: 90%;
	background: #fff;
	color: #19b36e;
	font-size: 32rpx;
	border-radius: 32rpx;
	padding: 20rpx 0;
	margin-top: 18rpx;
	border: 2rpx solid #19b36e;
}
.checkList{
	margin: 0 20rpx;
}
</style>